<template>
  <div class="check">
    <Card shadow>
      <p slot="title">订单详情</p>
      <i-form :model="formItem">
        <Form-item>
          <Row :gutter="16">
            <i-col v-for="(item, index) in newPaidData" :key="index" span="12">
              <i-input readonly style="margin-bottom: 15px;" v-model="item.value">
                <span slot="prepend">{{ item.title }}</span>
              </i-input>
            </i-col>
          </Row>
        </Form-item>
      </i-form>
    </Card>
    <Card shadow>
      <p slot="title">代付信息</p>
      <i-form :model="formItem">
        <Form-item>
      <Row :gutter="16">
        <i-col v-for="(item, index) in bankData" :key="index" span="12">
          <i-input readonly style="margin-bottom: 15px;" v-model="item.value">
            <span slot="prepend">{{ item.title }}</span>
          </i-input>
        </i-col>
      </Row>
      </Form-item>
      </i-form>
      <i-button style="margin-left: 100px;" class="com-btm" @click="comback()">返回</i-button>
    </Card>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'order_details_page',
  data () {
    return {
      paidData: [
        {
          title: '代付订单号',
          value: this.$route.params.row.order_no
        },
        {
          title: '商户ID',
          value: this.$route.params.row.uid
        },

        {
          title: '商户名称',
          value: this.$route.params.row.nickname
        },
        {
          title: '通道ID',
          value: this.$route.params.row.order_no
        },
        {
          title: '通道名称',
          value: this.$route.params.row.order_no
        },
        {
          title: '代付金额(元)',
          value: this.$route.params.row.issue_money
        },
        {
          title: '代付手续费(元)',
          value: this.$route.params.row.poundage
        },
        {
          title: '扣减金额(元)',
          value: (parseFloat(this.$route.params.row.issue_money) + parseFloat(this.$route.params.row.poundage)).toFixed(2)
        },

        // {
        //   title: '银行代码',
        //   value: this.$route.params.row.order_no
        // },
        {
          title: '客户端IP',
          value: this.$route.params.row.paid_ip
        },
        // {
        //   title: '设备',
        //   value: this.$route.params.row.order_no
        // },
        {
          title: '通知地址',
          value: this.$route.params.row.notice_url
        },

        {
          title: '创建时间',
          value: this.$route.params.row.add_time
        },
        {
          title: '处理时间',
          value: this.$route.params.row.dispose_time
        },

        {
          title: '状态',
          value: this.$route.params.row.status
        },
        {
          title: '备注',
          value: this.$route.params.row.fail_mark
        }
      ],
      bankData: [
        {
          title: '银行名称',
          value: this.$route.params.row.bank_name
        },

        {
          title: '账户名',
          value: this.$route.params.row.account_name
        },
        {
          title: '账户号(银行卡号)',
          value: this.$route.params.row.account
        },
        {
          title: '下发金额(元)',
          value: this.$route.params.row.issue_money
        },

        {
          title: '转账单号',
          value: this.$route.params.row.transfer_no
        }
      ]
    }
  },
  computed: {
    newPaidData () {
      let data = []
      let name
      switch (this.paidData[12].value.toString()) {
        case '0':
          name = '待处理'
          break
        case '1':
          name = '处理中'
          break
        case '2':
          name = '成功'
          break
        case '3':
          name = '失败'
          break
        case '4':
          name = '回退'
          break
      }
      this.paidData[12].value = name
      data = this.paidData
      return data
    }
  },
  methods: {
    ...mapMutations(['closeTag']),
    close () {
      this.closeTag({
        name: 'order_details_page',
        params: {
          row: this.$route.params.row
        }
      })
    },
    comback () {
      this.close()
    }
  }
}
</script>

<style>
.ivu-input-group-prepend {
  width: 30%;
}
.order-details .ivu-input {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
</style>
